<template>
	<view class="">
		<view class="item-box" v-if="order_class == 1">
			<view class="item-title">清洁间数</view>
			<view class="item-small">
				<input type="number" placeholder="请输入清洁间数" v-model="room_num">
			</view>
		</view>
		<view class="item-box" v-if="order_class == 2">
			<view class="item-title">工作时长</view>
			<view class="item-small">
				<input type="text" placeholder="请输入工作时长" v-model="time">
			</view>
		</view>
		<view class="item-box" style="display: block;height: auto;padding-bottom: 20rpx;">
			<view class="item-title">考勤照片</view>
			<view class="img-item1" @tap="upImag" v-if="isShang">
				<image mode="aspectFit" :src="imgUrl" ></image>
				<view class="main-text">添加图片</view>
			</view>
			<view class="img-item" v-else @tap="upImag">
				<image :src="image" mode=""></image>
			</view>
		</view>
		<view class="place-btn" @tap="save">上传考勤</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				imgUrl:`${getApp().globalData.imgScr}jd/xiangji.png`,
				isShang: true,
				image: '',
				longitude: uni.getStorageSync('cleaningData').longitude,
				latitude: uni.getStorageSync('cleaningData').latitude,
				time: '',
				room_num:'',
				order_class:0
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.order_id = options.id
			this.order_class = options.order_class
		},
		methods:{
			async upImag() {
				let _this = this
				try{
					let res = await uni.chooseImage()
					if(res[0]) throw new Error(JSON.stringify(res[0]))
					 let tempFilePaths = res[1].tempFilePaths;
					 uni.showLoading({
					 	title: '图片上传中....',
						mask:true,
					 });
					 let rep = await uni.uploadFile({
				            // url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //图片上传接口
				            url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //图片上传接口
				            filePath: tempFilePaths[0],
				            name: 'file',
							header: {
							"Content-Type": "multipart/form-data",
							},
						})
					let url = `${getApp().globalData.url}`+'uploads/'+JSON.parse(rep[1].data).file
					this.isShang = false
					this.image = url
					// 根据接口具体返回格式   赋值具体对应url
					uni.hideLoading()
				}catch(e){
					console.log('e =========>',e);
					uni.hideLoading()
					//TODO handle the exception
					if(e.message && JSON.parse(e.message)) {
						// 取消图片选择
					}else {
						uni.showToast({
							title:e.errMsg,
							icon:"none"
						})
					}
				}
			},
			save(){
				const params = {
					order_id: this.order_id,
					time: this.time,
					room_num:this.room_num,
					image: this.image,
					longitude: this.longitude,
					latitude: this.latitude,
				}
				this.$http.post('/index/Cleanerorder/attendance', params).then(res => {
					uni.showToast({
						title: '上传成功',
						icon: "none"
					})
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},1000)
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.item-box{
		display: flex;
		padding: 0 30rpx;
		background-color: #fff;
		height: 110rpx;
		font-size: 32rpx;
		line-height: 110rpx;
		margin: 16rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.item-title{
		width: 5em;
		text-align: left;
	}
	.item-small{
		flex: 1;
		input{
			height: 100%;
		}
	}
	.img-item{
		width: 160rpx;
		height: 160rpx;
		border-radius: 13rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.img-item1{
		width: 160rpx;
		height: 160rpx;
		background-color: #F5F7FD;
		border-radius: 13rpx;
		color: #c5c7cc;
		text-align: center;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1;
		image{
			width: 58rpx;
			height: 52rpx;
			margin: 20rpx 0;
		}
	}
	.place-btn{
		width: 622rpx;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		color: #fff;
		background: linear-gradient(to right,#8dc9f1,#d8eefc);
		border-radius: 96rpx;
		margin: 0 auto;
		font-size: 36rpx;
		letter-spacing: 2rpx;
	}
</style>